import React from "react";
import { inject, observer } from 'mobx-react';
import { Tools } from "weaver-mobile";
import "../../style/blessCard.less";
const getLabel = Tools.getLabel;

@inject('hrmBlessCard')
@observer
export default class BlessCard extends React.Component {
    componentDidMount() {
        const { hrmBlessCard: { readBirthdayBlessingData }, match: { params } } = this.props;
        readBirthdayBlessingData(params.id);
    }

    componentDidUpdate(prevProps, prevState) {
        const { hrmBlessCard: { setInfoHeight } } = this.props;
        setInfoHeight(document.getElementById("info").offsetHeight);
    }

    getLetterRows = () => {
        const { hrmBlessCard: { blessRowNumber } } = this.props;
        let arr = [];
        for (let i = 0; i < blessRowNumber; i++) {
            arr.push(<div className="blessingRow"/>)
        }
        return arr;
    }

     handleLetterPaperScroll = (e) => {
        document.getElementById("blessing").scrollTop = e.target.scrollTop;
    }

    render() {
        const { hrmBlessCard: { blessing, createDate, creator, imgUrl, blessingHeight, getBlessCardHeight } } = this.props;
        return (
            <div className="blessCard">
                <div className="bcInnner">
                    {imgUrl ? <img src={imgUrl} alt=""  className="img"/> : <div className="img substitute" style={{height: getBlessCardHeight()}}/>}
                    <div className="letterPaper" style={{height: blessingHeight}} onScroll={this.handleLetterPaperScroll}>
                        {this.getLetterRows()}
                    </div>
                    <div style={{height:blessingHeight}} className="blessing" id="blessing">
                        <div className="info" id="info">
                            <p>{blessing}</p>
                            <span dangerouslySetInnerHTML = {{ __html: getLabel(-1,"来自: {param}").replace("{param}",`<a>${creator}</a>`) }}></span>
                            <span>{createDate}</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}